import { ref, onMounted } from 'vue'
import { tableList, tableColumns, otherDimension, timeDimension } from './mockData'
export function baseTargetData() {
  const queryParams = ref({
    id: 17,
    searchTime: '2025-08-28',
    sqlTimeType: 'yyyy-MM' // yyyy、yyyy-MM、yyyy-MM-dd
  })
  const checked = ref()
  const menuRadioList = ref()
  const dateChecked = ref([])
  // 保留原始的选中的数据
  const saveChecked = ref([])
  const dateRadioList = ref()
  // 获取指标配置列表数据
  const tableData = ref([])
  const loading = ref(false)
  onMounted(() => {
    getConfigData()
  })
  const getConfigData = () => {
    menuRadioList.value = otherDimension
    dateRadioList.value = timeDimension
    // 年月日
    dateRadioList.value.forEach(item => {
      if (item.data === queryParams.value.sqlTimeType) {
        dateChecked.value.push(item.data)
        changeDate(dateChecked.value, 'start')
      }
    })
    checked.value = menuRadioList.value[0]?.data
    queryParams.value.dimension = checked.value
    getTargetDetails()
  }
  const getTargetDetails = () => {
    loading.value = true
    // 这里是后台请求，暂时写死
    tableData.value = tableList
    // 根据上面判断如果tableData里面返回了对应的字段，则tableColumns里面就存在，否则就删除掉
    // getTableColumns(tableData.value, tableColumns)
    loading.value = false
  }
  // 根据表头字段，删除多余的列
  function getTableColumns(tableData, tableColumns) {
    for (let i = 0; i < tableColumns.length; i++) {
      const column = tableColumns[i]
      if (tableData.some(item => item[column.prop])) {
        continue
      } else {
        tableColumns.splice(i, 1)
        i--
      }
    }
  }
  // 切换年月日
  const changeCheck = () => {
    queryParams.value.dimension = checked.value
    getTargetDetails()
  }
  const changeDate = (value, type = 'advanced') => {
    /***
     * 情况有以下几种：
     * 1. 当只选中`年`的时候，可以只选中年；如果取消勾选年，有选中月日的情况，要取消勾选月和日
     * 2. 当只选中`月`的时候，需要勾选年月；取消勾选月的时候，如果有选中年日的情况，也要把日给取消勾选；但年保留
     * 3. 当选中`日`的时候，需要勾选年月日；取消勾选日，如果有选中年月，也要把年月给取消勾选
     */
    let currentValue = [...value]
    // 判断用户是选中还是取消选中
    const isCheckAction = dateChecked.value.length > saveChecked.value.length
    // 判断是新增还是删除
    const changedValue = isCheckAction
      ? dateChecked.value.filter(item => !saveChecked.value.includes(item))
      : saveChecked.value.filter(item => !dateChecked.value.includes(item))
    // 根据不同的变化项处理逻辑
    if (changedValue[0] === 'yyyy') {
      if (isCheckAction) {
        console.log('新增年不做处理');
      } else {
        // 取消选中年：需要同时取消月和日
        currentValue = currentValue.filter(val => val !== 'yyyy-MM' && val !== 'yyyy-MM-dd');
      }
    } else if (changedValue[0] === 'yyyy-MM') {
      if (isCheckAction) {
        // 选中月：必须同时选中年
        if (!currentValue.includes('yyyy')) {
          currentValue.push('yyyy');
        }
      } else {
        // 取消月：如果日被选中，也要取消日
        if (currentValue.includes('yyyy-MM-dd')) {
          currentValue.splice(currentValue.indexOf('yyyy-MM-dd'), 1)
        }
      }
    } else if (changedValue[0] === 'yyyy-MM-dd') {
      // 日变化的情况
      if (isCheckAction) {
        // 选中日：必须同时选中年和月
        if (!currentValue.includes('yyyy')) {
          currentValue.push('yyyy');
        }
        if (!currentValue.includes('yyyy-MM')) {
          currentValue.push('yyyy-MM');
        }
      } else {
        console.log('不做处理');
      }
    }
    dateChecked.value = currentValue
    saveChecked.value = currentValue
    queryParams.value.sqlTimeType = dateChecked.value.includes('yyyy-MM-dd') ? 'yyyy-MM-dd' : dateChecked.value.includes('yyyy-MM') ? 'yyyy-MM' : 'yyyy'
    // 更新dateRadio中的status状态
    dateRadioList.value.forEach(item => {
      item.status = dateChecked.value.includes(item.value)
    })
    if (type === 'advanced') {
      getTargetDetails()
    }
  }
  function mergeCells({ row, column, rowIndex }) {
    if (column.property === "year") {
      return publicMergeCells(row, rowIndex, "year", tableData.value);
    }
    if (column.property === "month") {
      return publicMergeCells(row, rowIndex, "month", tableData.value)
    }
    if (column.property === "date") {
      return publicMergeCells(row, rowIndex, "date", tableData.value)
    }
    return { rowspan: 1, colspan: 1 };
  }

  function publicMergeCells(row, rowIndex, attr, tableData) {
    // 获取当前行的属性值
    const currentValue = row[attr];
    // 获取上一行的属性值
    const previousValue = rowIndex > 0 ? tableData[rowIndex - 1][attr] : null;
    // 如果当前属性值与上一行属性值相同，则不显示该单元格
    if (currentValue === previousValue) {
      return { rowspan: 0, colspan: 0 };
    }
    // 计算当前属性值的跨行数
    let rowspan = 1;
    for (let i = rowIndex + 1; i < tableData.length; i++) {
      if (tableData[i][attr] === currentValue) {
        rowspan++;
      } else {
        break;
      }
    }
    return { rowspan, colspan: 1 };
  }
  const setHeaderStyle = () => {
    return {
      backgroundColor: "#f5f5f5",
      color: "#333",
      fontWeight: "bold",
    }
  }
  return {
    checked,
    dateChecked,
    menuRadioList,
    dateRadioList,
    tableData,
    tableColumns,
    changeDate,
    changeCheck,
    getTargetDetails,
    mergeCells,
    setHeaderStyle
  }
}